<template>
	<div class="spike">
		<!-- 秒杀倒计时 -->
		<van-row type="flex" justify="space-between">
			<van-col class="title">
				<van-icon class-prefix="iconfont icon-miaosha" />
				<span>限时秒杀</span>
				<van-count-down :time="time">
					<template v-slot="timeData">
						<span class="time-item">{{ timeData.hours }}</span>:
						<span class="time-item">{{ timeData.minutes }}</span>:
						<span class="time-item">{{ timeData.seconds }}</span>
					</template>
				</van-count-down>
			</van-col>
			<van-col class="more">
				<span @click="goGoodsList">查看更多</span>
				<van-icon name="arrow" />
			</van-col>
		</van-row>
		<!-- 秒杀商品 -->
		<van-row class="spike-goods" type="flex" justify="space-between">
			<van-col class="spike-goods-item" @click="goDetail" :key="index" v-for="(item,index) in spike">
				<van-image width="3rem" fit="contain" lazy-load radius="5px" src="item.src" />
				<div class="van-multi-ellipsis--l2">{{item.goods_name}}</div>
				<div class="price">
					<span>￥{item.price}</span>
					<s>￥{{item.quantity}}</s>
				</div>
				xxx
			</van-col>
		</van-row>
		<like-goods></like-goods>
	</div>
</template>
<script>
	import {
		mapState,
			mapActions
	} from 'vuex'
	export default {
		data() {
			return {
				time: 30 * 60 * 60 * 1000,

			};
		},
		methods: {
			goDetail() {
				this.$router.push('/detail?goods_id=52157500821')
			},
			goGoodsList() {
				this.$router.push('/like-goods') // 跳到商品列表页，跳404了？
			},
			...mapActions(['getSpike'])
		},
		computed: {
			...mapState(['Spike'])
		},
		mounted() {
			console.log(this.getSpike)
			this.getSpike()
			console.log(this.$store.state.Spike)
		}
	};
</script>
<style lang="scss" scoped>
	.spike {
		padding: 10px;
		background-color: #fff;
		margin-bottom: 10px;

		.title {
			display: flex;
			justify-content: center;
			align-items: center;

			.icon-miaosha {
				font-size: 20px;
				color: #f06c7a;
				margin-right: 5px;
			}

			span {
				font-size: 16px;
				font-weight: bold;
				margin-right: 5px;
			}

			.time-item {
				display: inline-block;
				width: 20px;
				border-radius: 3px;
				margin-right: 3px;
				color: #fff;
				font-size: 12px;
				text-align: center;
				background-color: #f06c7a;
			}
		}

		.more {
			color: #bbb;
			display: flex;
			justify-content: center;
			align-items: center;
			font-size: 13px;
		}

		.spike-goods {
			overflow-x: auto;

			.spike-goods-item {
				padding: 10px 0;
				margin-right: 7px;
				width: 50%;

				img {
					border-radius: 5px;
				}

				.price {
					margin-top: 5px;
					display: flex;
					justify-content: space-between;

					span {
						font-size: 14px;
						color: #f06c7a;
					}

					s {
						color: #bbb;
					}
				}
			}
		}
	}
</style>
